<template>
  <div class="wrap">
      <el-form :model="dataForm" size="mini" ref="dataForm" :rules="dataFormRules">
        <el-form-item label="外部链接："  class="mb30" :required="true" :show-message="false">
            <el-input v-model="dataForm.url" placeholder="输入URL" class="w605" clearable></el-input>
        </el-form-item>
        <el-form-item label="banner："  class="mb30" label-width="92px">
            <el-upload
                drag
                action
                :on-success="imgUploadSuccess"
                :on-error="imgUploadError"
                :show-file-list="showFileList"
                :auto-upload="autoUpload"
                :http-request="uploadMethod">
                <img v-if="dataForm.imgUrl" :src="dataForm.imgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
    name:"H5Settle",
    data(){
        return{
            showFileList: false, //是否显示文件列表
            autoUpload: true, //图片自动上传
            dataForm:{

            },
            dataFormRules:{

            },

        }
    },
    methods:{
        setInfo(data){
            for(var key in data){
                this.$set(this.dataForm,key,data[key])
            }
        },
        /**
         * 本地上传图片成功回调
         */
        imgUploadSuccess(response, file, fileList) {
            this.imgUrlList.push({ url: URL.createObjectURL(file.raw), hover: null });
            this.uploadMethodVisible = false;
        },
        imgUploadError(err, file, fileList) {
            this.$message({ message: "文件上传失败,请重新上传", type: "error" });
        },
        uploadMethod(val) {
            let param = new FormData();
            //通过append向form对象添加数据
            param.append("file", val.file);
            //FormData私有类对象，访问不到，可以通过get判断值是否传进去
            this.utils.request.upload(param,res=>{
                if(res.code == '0000'){
                    // this.imgUrlList.push({ url: res.data.imageUrl, hover: null });
                    this.$set(this.dataForm,"imgUrl", res.data.imageUrl);
                    this.$message({ message: "上传成功", type: "success" });
                }else{
                    this.$message({ message: "上传失败，请重试", type: "error" });
                }
            });
        },
        getPreview(){
            if(this.dataForm.url == null || this.dataForm.url == ''){
                this.$message({type:"error","message":"请输入外部链接"})
                return null;
            }
            return this.dataForm;
        }
    }
}
</script>

<style lang="scss" scoped>
.el-checkbox {
  margin-right: 30px;
}
/deep/ .el-form {
  .txt {
    /deep/ .el-form-item {
      margin-top: 0px;
    }
    .flex {
      line-height: 3;
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .el-textarea {
      width: auto;
    }
  }
  .phone {
    .el-form-item__content {
      display: flex;
      justify-content: flex-start;
    }
  }
  .textareaParm{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
}

.font20{
  font-size: 20px !important;
}
/deep/ .w194{
  width: 194px !important;
  .el-input__inner{
    width: 194px  !important;
  }
}
.noMarginRight{
  margin-right: 0 !important;
}
.labelMarginLeft5{
  /deep/ .el-form-item__label{
    margin-left: 10px;
  }
}
/deep/ .w495{
  width: 443px !important;
  .el-input__inner{
    width:443px !important;
  }
}
/deep/ .w605{
  width: 605px !important;
  .el-input__inner{
    width:605px !important;
  }
}
.noMarginLeft{
  margin-left: 0 !important;
}
/deep/ .copyBtn{
  border: 1px solid #0079DC !important;
  border-radius: 16px !important;
  background-color: #409EFF !important;
  color: #fff !important;
}
.mr10{
  margin-right: 10px !important;
}
.desc{
  color: #c4c4c4;
  font-size: 14px;
}
.w706{
  width: 648px !important;
}
.w738{
  width: 738px !important;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
/deep/ .el-upload-dragger{
    // width: 178px;
    // height: 178px;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>